<template>
    <section>
        <!--工具条-->
        <!--<el-col :span="24" class="toolbar">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item>
                    <el-button  @click="toPage(62)"  :plain="true" type="primary" >返回</el-button>
                </el-form-item>
            </el-form>
        </el-col>-->
        <!--数据列表-->
        <el-table
                :data="tableData"
                style="width: 100%">
            <el-table-column type="expand">
                <template scope="props">
                    <p>SQL: {{ props.row.sql_content }}</p>
                </template>
            </el-table-column>
            <el-table-column
                    label="标题"
                    prop="sql_name">
            </el-table-column>
            <el-table-column
                    label="状态"
                    prop="run_result">
                <template scope="props">
                    {{props.row.run_result | runResult}}
                </template>
            </el-table-column>
            <el-table-column
                    label="时间"
                    prop="update_time">
                <template scope="props">
                  {{props.row.update_time | timeTransformation}}
                </template>
            </el-table-column>
        </el-table>
        <!--分页-->
        <el-col :span="24" class="toolbar" style="padding-bottom:10px;">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageParm.start_index"
                    :page-sizes="[5, 10, 20, 50]"
                    :page-size="pageParm.page_size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pageParm.count" style="float:right">
            </el-pagination>
        </el-col>
    </section>
</template>
<script>
  import dao from '../../common/dao'
  import util from '../../common/util'
  import {mapActions} from 'vuex'
  export default {
    data() {
      return {
        tableData: [{
          title: 'Sample',
          status: 'ERROR',
          time: '11 min  ago',
          sql_content: 'Select * from employee limit 100'
        }],
        pageParm: {
          "count": 0,//总条数
          "page_size": 20,//每页条数
          "page_count": 1,//总页数
          "start_index": 1//当前页数
        },
        data_hive_sql_id: '',
      }
    },
    methods: {
      ...mapActions([
        'setPage6Sql' // 映射 this.setuser() 为 this.$store.dispatch('setuser')
      ]),
      toPage (p) {
        this.$router.push({path: `/page${p}`, query: {tabId: 'second'}});
      },
      handleSizeChange (val) {
        this.pageParm.page_size = val;
        this.getTableData();
      },
      handleCurrentChange (val) {
        this.pageParm.start_index = val;
        this.getTableData();
      },
      getTableData(){
        //let data_hive_sql_id;
        //if (this.data_hive_sql_id != '') data_hive_sql_id = this.data_hive_sql_id
        let start_index = this.pageParm.start_index;
        let page_count = this.pageParm.page_size;
        dao.getRunQuerySqlHis({start_index, page_count}).then(res => {
          if (!res.body || res.body.retCode != '200') {
           util.apiMsg(res);
           return false
          }
          this.pageParm.count = res.body.count;
          this.tableData = res.body.results;
        });
      },
      pageInit(){
        let query = this.$store.state.route.query || {};
        this.data_hive_sql_id = query.data_hive_sql_id;
        this.getTableData()
      },
    },
    mounted () {
      this.pageInit();
    }
  }
</script>
